<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#"
    py:extends="'master.kid'">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>#${channel.name} - ${ptype}</title>
	<script type="text/javascript" src="/static/javascript/prototype.lite.js"></script>
	<script type="text/javascript" src="/static/javascript/moo.fx.js"></script>
	
	<script type="text/javascript" language="javascript" charset="utf-8">
	// <![CDATA[
	
		//initialise current date.
		var currentDate = new Date();
		var effects = [];
		var year_map = function (year) {
			if (currentDate.getFullYear() == year) {
				return OPTION({'value': year, 'selected': 'selected'}, year);
			} else {
				return OPTION({'value': year}, year);
			}
		}
		
		var createYears = function(start, end) {
			start = start.getFullYear();
			end = end.getFullYear();
			var iteryr = start;
			var avail_years = [];
			while(iteryr <= end) {
				avail_years.push(iteryr);
				iteryr++;
			}
			var yearnav = SELECT({'id': 'yearnav', 'onchange': 'updateYear(this);'}, map(year_map, avail_years));
			swapDOM('yearnav', yearnav);
		}
		
		var month_map = function(month) {
			var monthNames = new Array(12);
			monthNames[0] = 'January';
			monthNames[1] = 'February';
			monthNames[2] = 'March';
			monthNames[3] = 'April';
			monthNames[4] = 'May';
			monthNames[5] = 'June';
			monthNames[6] = 'July';
			monthNames[7] = 'August';
			monthNames[8] = 'September';
			monthNames[9] = 'October';
			monthNames[10] = 'November';
			monthNames[11] = 'December';
			
			if (currentDate.getMonth() == month) {
				return OPTION({'selected': 'selected', 'value': month}, monthNames[month]);
			} else {
				return OPTION({'value': month}, monthNames[month]);
			}
		}
		
		var createMonths = function(start, end) {
			
			var _currentYear = currentDate.getFullYear();
			var _startYear = start.getFullYear();
			var _endYear = end.getFullYear();
			
			var startMonth = 0;
			var endMonth = 11;
			//Decide how many months we need
			if (_currentYear == _startYear) {
				// Start at startYear's first month
				startMonth = start.getMonth();
			}
			
			if (_currentYear == _endYear) {
				// End at endYear's last month
				endMonth = end.getMonth();
			}
			
			var _iterMonth = startMonth;
			var months = [];
			while (_iterMonth <= endMonth) {
				months.push(_iterMonth);
				_iterMonth++;
			}
			
			var monthnav = SELECT({'id': 'monthnav', 'onchange': 'updateMonth(this);'}, map(month_map, months));
			swapDOM('monthnav', monthnav);
		}
		
		var isLeapYear = function(year) {
			//find out if this is a leap year...
			// Damn you and your complexities February...  dodgy spelling and dodgy numbers of days.
			var result = 0;
			if ((year % 4) == 0) {
				//it's divisible by 4
				if ((year % 100) == 0) {
					//it's divisible by 100
					// Is it also divisible by 400?
					result = ((year % 400) == 0);
				} else {
					result = 1;
				}
			} else {
				result = 0;
			}
			return (result);
		}
		
		var day_map = function(day) {
			if (currentDate.getDate() == day) {
				return OPTION({'value': day, 'selected': 'selected'}, day);
			} else {
				return OPTION({'value': day}, day);
			}
		}
		
		var createDays = function(start, end) {
			var _currentMonth = currentDate.getMonth();
			var _startMonth = start.getMonth();
			var _endMonth = end.getMonth();
			var days = new Array(12);
			  days[0] = 31; // January
			  days[1] = (isLeapYear(currentDate.getFullYear)) ? 29 : 28; // February
			  days[2] = 31; // March
			  days[3] = 30; // April
			  days[4] = 31; // May
			  days[5] = 30; // June
			  days[6] = 31; // July
			  days[7] = 31; // August
			  days[8] = 30; // September
			  days[9] = 31; // October
			  days[10] = 30; // November
			  days[11] = 31; // December
			var _startDay = 1;
			var _endDay = days[_currentMonth];
			
			if (_currentMonth == _startMonth) {
				_startDay = start.getDate();
			}
			if (_currentMonth == _endMonth) {
				_endDay = end.getDate();
			}
			var _iterDay = _startDay;
			var _days = [];
			while (_iterDay <= _endDay) {
				_days.push(_iterDay);
				_iterDay++;
			}
			var daynav = SELECT({'id': 'daynav', 'onchange': 'updateDay(this);'}, map(day_map, _days));
			swapDOM('daynav', daynav);
		}
		
		var createArcNav = function() {
			addElementClass('masternavbottom', 'hidden');
			currentDate = isoDate($('arc_date').value);
			var lastDate = isoDate($('last_date').value);
			var firstDate = isoDate($('first_date').value);
			
			createYears(firstDate, lastDate);
			createMonths(firstDate, lastDate);
			createDays(firstDate, lastDate);
		}
		
		var updateYear = function(element) {
			var year = element.value;
			currentDate = new Date(year, currentDate.getMonth(), currentDate.getDate());
			createArcNav();
		}
		
		var updateMonth = function(element) {
			var month = element.value;
			currentDate = new Date(currentDate.getFullYear(), month, currentDate.getDate());
			createArcNav();
		}
		
		var updateDay = function(element) {
			var day = element.value;
			currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
		}
		
		var archiveJump = function() {
			var host = document.location.host
			var service = getElement("servicename").value;
			var channel = getElement("channelname").value;
			var uri = "http://" + host + "/archive/" + service + "/" + channel;
			var datestring = toISODate(currentDate);
			datestring = datestring.split("-");
			uri = uri + "/" + datestring[0] + "/" + datestring[1] + "/" + datestring[2];
			document.location = uri;
		}
		
		var initEffects = function() {
			effects['navbarSlide'] = new fx.Height("navslider", {duration: 500, onComplete: getElement('arctablink').blur()});
			effects['navbarSlide'].hide();
			removeElementClass('navslider', 'hidden');
		}
		
		addLoadEvent(createArcNav);
		addLoadEvent(initEffects);
		
		
	// ]]>
	</script>
  </head>
  <body>
	
	<div id="arcnav">
		<div id="navslider" class="hidden">
			<div class="bgblend">
			<div id="searchnav">
				<form action="search" method="get">
					<input type="text" name="q" value="Keyword Search Disabled" id="q" disabled="disabled" size="25" />
					<input type="submit" value="Search" disabled="disabled" />
				</form>
			</div>
			
			<div id="datenav">
				<select id="daynav"></select>
				<select id="monthnav"></select>
				<select id="yearnav"></select>
				<a href="javascript:archiveJump();"><img src="/static/images/go.png" alt="Go to archive"/></a>
			</div>
			
			</div>
		</div>
		<div id="arctab" class="navbottom" align="center"><a href="#" id="arctablink" onclick="effects['navbarSlide'].toggle()"><img src="/static/images/arctab.png" alt="Browse Archive" /></a></div>
	</div>

<div id="content">
	
	<input id="arc_date" type="hidden" value="${arc_date}"/>
	<input id="first_date" type="hidden" value="${first_date}"/>
	<input id="last_date" type="hidden" value="${last_date}"/>
	<input id="channelname" type="hidden" value="${channel.name}"/>
	<input id="servicename" type="hidden" value="${channel.service.name.lower()}"/>
    <h1>#${channel.name} on ${service.name}</h1>

	<h4 py:content="ptype">Page type goes here</h4>
	
	<div id="messages">
		<table py:if="len(messages) > 0">
			<span py:strip="True" py:for='i,m in enumerate(messages)'>
			<tr py:if="m.day_changed()" class="daychange">
				<td colspan="3">${m.time.strftime("%d %B %Y")}</td>
			</tr>
			<tr class="${i%2 and 'odd' or 'even'}">
				<td class="time" py:content="m.time.strftime('%H:%M')">00:00</td>
				<td py:if="m.isaction" class="action" colspan="2">${m.nick} 
					${m.line}</td>
				<span py:strip="True" py:if="not m.isaction">
				<td class="nick" py:content="'%s:' % m.nick">Nick</td>
				<td class="line" py:content="XML(m.line)">The line goes here</td>
				</span>
			</tr>
			</span>
		</table>
		
		<p py:if="not len(messages) > 0">No messages found.</p>
	</div>
	
</div>
  
</body>
</html>